<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">我是div</div>
    <span>我是span</span>
    <p class="c1">我是p标签111</p>
    <p class="c1">我是p标签222</p>

    <input type="checkbox" name="username" id="">
    <input type="checkbox" name="username" id="">

    <div class="swipper">
        <div>
            <p>今天天气不错</p>
        </div>
    </div>

    <script>
        // querySelector 填 id选择器，相当于是 getElementById
        var oBox1 = document.getElementById('box');
        var oBox2 = document.querySelector('#box');
        console.log(oBox1,oBox2);

        // querySelector 填 标签名，相当于是 getElementsByTagName
        var oSpan1 = document.getElementsByTagName('span')[0];
        var oSpan2 = document.querySelector('span');
        console.log(oSpan1, oSpan2);

        // 
        var oClass1 = document.getElementsByClassName('c1');// 获取所有class是c1的元素 HTMLCollection
        var oClass2 = document.querySelector('.c1'); // 获取第一个class是c1的元素
        var oClass3 = document.querySelectorAll('.c1'); // 获取所有class是c1的元素 NodeList
        console.log(oClass1,oClass2, oClass3);

        // 通过name属性获取元素
        var oNames1 = document.getElementsByName('username');// 获取所有name是username的元素节点 NodeList
        var oNames2 = document.querySelector('[name=username]');// 找到第一个name是username的元素节点
        var oNames3 = document.querySelectorAll('[name=username]');// 获取所有name是username的元素节点 NodeList
        console.log(oNames1,oNames2,oNames3);

        // 元素嵌套获取节点，querySelector和querySelectorAll可以写复杂的选择器
        var oP = document.querySelector('.swipper div p');
        console.log(oP);
    </script>
</body>
</html>